<template>
	<page-meta><navigation-bar title="积分明细" front-color="#000000" background-color="#ffffff" /></page-meta>
	<view>
		<view class="top border-bt" style="position: fixed;z-index: 10;top: 0;left: 0;width: 100%;background: #fff;">
			<view class="top3" @tap="opens" style="text-align: left;text-indent: 25px;">全部</view>	   
			<view class="top1" @tap="DatePicke5">开始时间 <image style="width: 14px;height: 13px;margin-left: 5px;" src="/static/img/xiala.png" mode=""></image></view>
			<view class="top2" @tap="DatePicke6">结束时间<image style="width: 14px;height: 13px;margin-left: 5px;" src="/static/img/xiala.png" mode=""></image></view>
			
		</view>
		<view class="lst" style="margin-top: 40px;">
			
			<block v-for="i,index in mingxi">
				<view class="lst-it border-bt" style="background: #fff;">
					<view :style="{background:i.fbalance>0?'rgb(255,201,66)':'rgb(254,63,70)'}" class="letf" style="margin-top: 10rpx;margin-right: 24rpx; width: 100rpx;height: 100rpx;line-height: 100rpx;text-align: center;border-radius: 50%;background: rgb(255,201,66);color: #fff;">
						{{i.fbalance>0 ? '增加':'减少'}}
					</view>
					<view class="letf">
						<text style="font-size: 16px;">{{i.ftitle}}</text>
						<text style="font-size: 14px;color: #acacac;">{{i.fremark}}</text>
						<text style="font-size: 12px;color: #acacac;">{{i.faddtime.replace('T',' ')}}</text>
					</view>
					<view class="rihgt" style="margin-top: 20rpx;">
						
						<text style="color:red" :style="{color:i.fbalance>0?'green':'rgb(254,63,70)'}">{{i.fbalance}}</span></text>
						<text>积分余额：{{i.fbalanceall}}</text>
					</view>
				</view>
			</block>
			<!-- <block>
				<view class="lst-it" style="background: #fff;border-bottom: 1px solid #f5f5f5;">
					<view class="letf" style="margin-top: 10rpx;margin-right: 24rpx; width: 100rpx;height: 100rpx;line-height: 100rpx;text-align: center;border-radius: 50%;background: rgb(35,188,219);color: #fff;">
						失败
					</view>
					<view class="letf">
						<text style="font-size: 16px;">跟单成功</text>
						<text style="font-size: 14px;color: #acacac;">跟单失败返还</text>
						<text style="font-size: 12px;color: #acacac;">2012-12-12 12:12:12</text>
					</view>
					<view class="rihgt" style="margin-top: 20rpx;">
						
						<text style="color:red">123123213</span></text>
						<text>积分余额：121212</text>
					</view>
				</view>
			</block>
			<block>
				<view class="lst-it" style="background: #fff;border-bottom: 1px solid #f5f5f5;">
					<view class="letf" style="margin-top: 10rpx;margin-right: 24rpx; width: 100rpx;height: 100rpx;line-height: 100rpx;text-align: center;border-radius: 50%;background: rgb(254,63,70);color: #fff;">
						失败
					</view>
					<view class="letf">
						<text style="font-size: 16px;">跟单成功</text>
						<text style="font-size: 14px;color: #acacac;">跟单失败返还</text>
						<text style="font-size: 12px;color: #acacac;">2012-12-12 12:12:12</text>
					</view>
					<view class="rihgt" style="margin-top: 20rpx;">
						
						<text style="color:red">123123213</span></text>
						<text>积分余额：121212</text>
					</view>
				</view>
			</block> -->
		</view>
		<text style="color: red;display: block;margin-top: 100px;text-align: center;background: #fff;padding-bottom: 100px;" v-if="!mingxi.length">
			暂无数据！
			
		</text>
		<uni-load-more iconType="snow" :iconSize="20" :status="loadtype" v-if="mingxi.length >=10 "/>
		<DatePicke
		startYear="1990" 
		endYear="2030" 
		:val="selectedTime5"
		@confirm="onConfirm" 
		ref="DatePicke5"></DatePicke>
		<DatePicke
		startYear="1990" 
		endYear="2030" 
		:val="selectedTime6"
		@confirm="onConfirm1" 
		ref="DatePicke6"></DatePicke>
		<!-- <uni-popup type="bottom" ref="shilst">
			<view style="background: #fff;min-height: 200px;">
				
				<text @click="selimg1()" :style="{'color':!query.fdealeraccount?'red':''}" style="text-indent: 20px;font-size: 14px;color: #3b4144;display: block;padding: 10px 0;border-bottom: 1px solid #ccc;">全部</text>
				<text v-for="i in shipandata" @click="selimg1(i)" :style="{'color':query.fdealeraccount == i.accountNo?'red':''}" style="text-indent: 20px;font-size: 14px;color: #3b4144;display: block;padding: 10px 0;border-bottom: 1px solid #ccc;">{{i.accountNo}}</text>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import DatePicke from "@/components/DatePicke/DatePicke";
	
	export default {
		components: {
				DatePicke,
		},
		data() {
			return {
				selectedTime5:this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date()),//开始选中时间
				selectedTime6:this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date()),//结束选中时间
				query:{
					ftoken:this.$store.state.user.token,
					fremark:'',
					fstarttime:'',
					fendtime:'',
					count:0,
					fpagesize:30,
					fpage:1,
				},
				Url:this.$store.state.url1,
				mingxi:[],
				loadtype:false
			}
		},
		onReachBottom(e){
			// console.log(this.query)
			var _this = this;
			if(this.query.count<=1){
				return;
			};
			if(this.query.count == _this.query.fpage){
				_this.loadtype = 'noMore';
				return;
			}
			_this.loadtype = 'loading';
			_this.query.fpage = _this.query.fpage +1;
			_this.xuan(true);
		},
		methods: {
			selimg1(e){
				if(!e){
					this.query.fremark = '';
				}else{
					this.query.fremark = e;
				}
				this.xuan();
				this.close();
			},
			opens(){
				this.query = {
					ftoken:this.$store.state.user.token,
					fremark:'',
					fstarttime:'',
					fendtime:'',
					count:0,
					fpagesize:30,
					fpage:1,
				}
				this.xuan();
			},
			open(obj) {
				this.$refs.shilst.open();
			},
			close() {
				this.$refs.shilst.close();
			},
			getdata(){
				var _this = this;
				_this.xuan();
			},
			dateFormat(fmt, date) {
			    let ret;
			    const opt = {
			        "Y+": date.getFullYear().toString(),        // 年
			        "m+": (date.getMonth() + 1).toString(),     // 月
			        "d+": date.getDate().toString(),            // 日
			        "H+": date.getHours().toString(),           // 时
			        "M+": date.getMinutes().toString(),         // 分
			        "S+": date.getSeconds().toString()          // 秒
			    };
			    for (let k in opt) {
			        ret = new RegExp("(" + k + ")").exec(fmt);
			        if (ret) {
			            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
			        };
			    };
			    return fmt;
			},
			DatePicke5(){
				this.$refs.DatePicke5.show();
			},
			DatePicke6(){
				this.$refs.DatePicke6.show();
			},
			//点击确定返回数据
			onConfirm(e){
				this.query.fstarttime=e;
				this.xuan();
				// console.log(e)
			},
			onConfirm1(e){
				this.query.fendtime=e;
				this.xuan();
				// console.log(e)
			},
			xuan(type){
				var _this = this;
				if(!type){
					_this.query.fpage = 1;
					uni.pageScrollTo({
						scrollTop: 0, //距离页面顶部的距离
						duration: 50
					});
				};
				// console.log(encodeURI(_this.$store.state.url + '/api/shequuser/mycenter/GetPointBalance?ftoken='+this.$store.state.user.token+'&fpagesize='+this.query.fpagesize+'&fpage='+this.query.fpage+'&fremark='+this.query.fremark+'&fstarttime='+this.query.fstarttime+'&fendtime='+this.query.fendtime))
				// console.log( _this.$store.state.url + '/api/shequuser/mycenter/GetPointBalance?ftoken='+this.$store.state.user.token+'&fpagesize='+this.query.fpagesize+'&fpage='+this.query.fpage+'&fremark='+this.query.fremark+'&fstarttime='+this.query.fstarttime+'&fendtime='+this.query.fendtime)
				uni.request({
					method: 'post',
					url: encodeURI(_this.$store.state.url + '/api/shequuser/mycenter/GetPointBalance?ftoken='+this.$store.state.user.token+'&fpagesize='+this.query.fpagesize+'&fpage='+this.query.fpage+'&fremark='+this.query.fremark+'&fstarttime='+this.query.fstarttime+'&fendtime='+this.query.fendtime),
					// contentType: "application/json;",
					// data: json,
					success: function(data) {
						data = data.data;
						if (data.code == 200) {
							
							// console.log()
							if(!type){
								_this.query.count = Math.ceil(data.data.count/_this.query.fpagesize);
								_this.mingxi = data.data.list;
							}else{
								for(var i in data.data.list){
									_this.mingxi.push(data.data.list[i])
								}
							}
								
						} else {
							// alert(data.msg)
						}
					}
				})				
			}
		},
		onShow() {
			// console.log(this.$store.state.user.token)
			var _this = this;
			uni.getNetworkType({
				success: function(res) {
					if (res.networkType == 'none') {
						uni.showToast({
							title: '当前无网络连接，请检查！',
							icon: 'none',
							duration: 5000
			
							// position:'top'
						});
					}
				}
			});
			uni.onNetworkStatusChange(function(res) {
				if (!res.isConnected) {
					uni.showToast({
						title: '当前无网络连接，请检查！',
						icon: 'none',
						duration: 3000
						// position:'top'
					});
				} else {
					uni.showToast({
						title: '网络已连接！',
						icon: 'none',
						duration: 3000
						// position:'top'
					});
					_this.getdata();
				}
			});
			if(_this.setdata){
				for(var i in _this.setdata){
					var is = _this.setdata[i];
					_this.shisetdata[i] = is;
				};
			};
			this.height = uni.getSystemInfoSync().windowHeight;
			this.getdata();
		},
	}
</script>

<style scoped>
.top{
	display: flex;
	flex-direction: row;
	line-height: 40px;
	/* border-bottom:1px solid #f1f1f1; */
}
.top >*{
	flex: 1;
	text-align: center;
	font-size: 14px;
}
.top >*::before{
	/* content: url(/static/img/xiala.png); */
}
.lst-it{
	padding: 20px 15px;
	/* border-top: 1px solid rgba(0,0,0,.1); */
	overflow: hidden;
}
.rihgt{
	float: right;
}
.letf{
	float: left;
}
.letf uni-text{
	display: block;
}
.letf uni-text:first-of-type{
	font-size: 16px;
	font-weight: 600;
}
.letf uni-text:last-of-type{
	font-size: 13px;
}
.rihgt uni-text{display: block;text-align: right;}
.rihgt uni-text:first-of-type{font-size: 16px;padding-bottom: 3px;}
.rihgt uni-text:last-of-type{
	font-size: 12px;
	color: #9b9b9b;
}
</style>
